<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="false">
			<block slot="content">归档</block>
			<block slot="right">
				<view class="action">
					<view class="cu-load load-cuIcon" :class="isLoad?'loading':'over'"></view>
				</view>
			</block>
		</cu-custom>
		<scroll-view scroll-x class="nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" v-for="(item, index) in tabList" :key="index" :class="index==tabCur?'cur text-blue':''" @tap="tabSelect(index)">
					{{ item }}
				</view>
			</view>
		</scroll-view>
		
		<!-- 按分类 -->
		<view class="cu-list menu" v-if="tabCur==0">
			<view class="cu-item arrow" v-for="(item, index) in categoryList" :key="index" @tap="toDetail(item.articleNum, item.name, item.id)">
				<view class="content">
					<text class="text-grey">{{ item.name }}</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{ item.articleNum }}篇</text>
				</view>
			</view>
		</view>
		
		<!-- 按时间 -->
		<view class="cu-list menu" v-if="tabCur==1">
			<view class="cu-item arrow" v-for="(item, index) in timeList" :key="index" @tap="toDetail(item.articleNum, item.ym, item.ym)">
				<view class="content">
					<text class="text-grey">{{ item.ym }}</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{ item.articleNum }}篇</text>
				</view>
			</view>
		</view>
		
		<!-- 按标签 -->
		<view class="cu-list menu" v-if="tabCur==2">
			<view class="cu-item arrow" v-for="(item, index) in labelList" :key="index" @tap="toDetail(item.articleNum, item.name, item.id)">
				<view class="content">
					<text class="text-grey">{{ item.name }}</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{ item.articleNum }}篇</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as category from '@/api/blog/category.js'
	import * as article from '@/api/blog/article/article.js'
	import * as label from '@/api/blog/label.js'
	export default {
		data() {
			return {
				isLoad: false,
				tabCur: 0,
				tabList: ['按分类', '按时间', '按标签'],
				categoryList: [],
				timeList: [],
				labelList: []
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			async loadData(){
				this.isLoad = true
				// 分类
				this.categoryList = await category.getList().then(res => {
					let data = []
					if (res.code === 1) {
						data = res.data || []
					}
					return data
				})
				// 时间
				this.timeList = await article.getTimeArchive().then(res => {
					let data = []
					if (res.code === 1) {
						data = res.data || []
					}
					return data
				})
				// 标签
				this.labelList = await label.getList().then(res => {
					let data = []
					if (res.code === 1) {
						data = res.data || []
					}
					return data
				})
				this.isLoad = false
			},
			tabSelect(idx) {
				this.tabCur = idx
			},
			toDetail(articleNum, title, key){
				if (articleNum) {
					this.$tools.go('./detail?type=' + this.tabCur + '&title=' + title + '&key=' + key)
				}
			}
		}
	}
</script>

<style>

</style>
